<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-16 flex">
    <?php include $_view_obj->compile("left_menu.html"); ?>

    <!-- 右侧主要内容 -->
    <div class="w-3/4 ml-4 bg-white rounded-xl shadow-sm p-4">
        
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-dark">通知列表</h2>
            <button id="mark-all-read" class="btn-primary">批量标记为已读</button>
        </div>
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <input type="checkbox" id="select-all">
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        通知内容
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        时间
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        状态
                    </th>
                </tr>
            </thead>
            <tbody id="notification-list" class="bg-white divide-y divide-gray-200">
                <!-- 通知列表项将通过 JavaScript 动态添加 -->
            </tbody>
        </table>
        <div class="flex justify-center mt-4" id="pagination">
            <!-- 分页按钮将通过 JavaScript 动态添加 -->
        </div>

    </div>
</main>

<script>
    $(document).ready(function() {
        // 模拟通知数据
        const notifications = [
            { id: 1, content: '您有新的应用审核结果，请查看。', time: '2024-01-01 10:00', read: false },
            { id: 2, content: '您的账户有一笔新的消费记录。', time: '2024-01-02 14:30', read: false },
            { id: 3, content: '系统将在今晚进行维护，请提前做好准备。', time: '2024-01-03 09:15', read: false },
            { id: 4, content: '您的应用使用时长已达到本月上限。', time: '2024-01-04 16:45', read: false },
            { id: 5, content: '有新的应用推荐，快来看看吧。', time: '2024-01-05 11:20', read: false },
            { id: 6, content: '您的任务已完成，记得查看奖励。', time: '2024-01-06 13:30', read: false },
            { id: 7, content: '系统更新已发布，建议您及时更新。', time: '2024-01-07 15:00', read: false },
            { id: 8, content: '您的账户安全等级较低，请尽快修改密码。', time: '2024-01-08 17:15', read: false },
            { id: 9, content: '您有新的消息，请及时查看。', time: '2024-01-09 10:30', read: false },
            { id: 10, content: '应用活动即将开始，不要错过。', time: '2024-01-10 14:00', read: false },
            { id: 11, content: '您的积分已更新，请查看。', time: '2024-01-11 09:45', read: false },
            { id: 12, content: '有新的合作机会，快来了解一下。', time: '2024-01-12 16:00', read: false },
            { id: 13, content: '您的订阅即将到期，请及时续费。', time: '2024-01-13 11:30', read: false },
            { id: 14, content: '系统检测到异常登录，请及时处理。', time: '2024-01-14 13:45', read: false },
            { id: 15, content: '您的应用评价已收到，感谢您的反馈。', time: '2024-01-15 15:30', read: false },
        ];

        const itemsPerPage = 5;
        let currentPage = 1;

        // 渲染通知列表
        function renderNotifications(page) {
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const currentNotifications = notifications.slice(startIndex, endIndex);

            $('#notification-list').empty();
            currentNotifications.forEach(notification => {
                const row = `
                    <tr data-id="${notification.id}">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="select-notification" ${notification.read ? 'disabled' : ''}>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="${notification.read ? '' : 'font-bold'}">${notification.content}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            ${notification.time}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="${notification.read ? 'text-green-500' : 'text-red-500'}">
                                ${notification.read ? '已读' : '未读'}
                            </span>
                        </td>
                    </tr>
                `;
                $('#notification-list').append(row);
            });

            // 绑定点击事件
            $('.select-notification').change(function() {
                const notificationId = $(this).closest('tr').data('id');
                const notification = notifications.find(n => n.id === notificationId);
                if (notification) {
                    notification.read = true;
                    $(this).closest('tr').find('span').removeClass('font-bold');
                    $(this).closest('tr').find('span').last().text('已读').removeClass('text-red-500').addClass('text-green-500');
                    $(this).prop('disabled', true);
                }
            });
        }

        // 渲染分页按钮
        function renderPagination() {
            const totalPages = Math.ceil(notifications.length / itemsPerPage);
            $('#pagination').empty();
            for (let i = 1; i <= totalPages; i++) {
                const button = `<button class="px-3 py-1 mx-1 border rounded ${i === currentPage ? 'bg-ocean-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-200'}">${i}</button>`;
                $('#pagination').append(button);
            }

            // 绑定分页按钮点击事件
            $('#pagination button').click(function() {
                currentPage = parseInt($(this).text());
                renderNotifications(currentPage);
                renderPagination();
            });
        }

        // 批量标记为已读
        $('#mark-all-read').click(function() {
            $('.select-notification:checked').each(function() {
                const notificationId = $(this).closest('tr').data('id');
                const notification = notifications.find(n => n.id === notificationId);
                if (notification) {
                    notification.read = true;
                    $(this).closest('tr').find('span').removeClass('font-bold');
                    $(this).closest('tr').find('span').last().text('已读').removeClass('text-red-500').addClass('text-green-500');
                    $(this).prop('disabled', true);
                }
            });
            $('#select-all').prop('checked', false);
            renderNotifications(currentPage);
        });

        // 全选/全不选
        $('#select-all').change(function() {
            const isChecked = $(this).is(':checked');
            $('.select-notification:not(:disabled)').prop('checked', isChecked);
        });

        // 初始化
        renderNotifications(currentPage);
        renderPagination();
    });
</script>